<template>
  <div class="record-table"  style="flex: 1; padding: 20px; min-width: 0; background-color: #0e2f60; overflow-y: auto;">
		<el-table :data="recordList" style="width: 100%" v-loading="loading">
			<el-table-column prop="nickname" label="用户"></el-table-column>
			<el-table-column prop="store_name" label="商家"></el-table-column>
			<el-table-column prop="province" label="地区"></el-table-column>
			<el-table-column prop="where" label="足迹"></el-table-column>
			<el-table-column prop="add_time" label="时间" width="150"></el-table-column>
		</el-table>
		<div class="pages" style="padding-bottom: 20px;">
			<el-pagination
			  background
			  layout="prev, pager, next"
				:page-size="30"
			  :total="total"
				@current-change="init($event-1)">
			</el-pagination>
		</div>
	</div>
</template>

<script>
	export default {
		data(){
			return{
				loading: true,
				recordList: [],
				total: 0
			}
		},
		methods: {
			init(page){
				this.$http(this.$ptApiList.BrowseOrderData, {
				  type: 2,
				  map_type: 1,
				  page: page,
				  limit: 30,
				}).then(res => {
					this.loading = false
					this.recordList = res.datas
					this.total = res.count
				})
			}
		},
		created(){
			this.init(0)
		}
	}
</script>
<style lang="scss">
.record-table{
	.el-table {
		background-color: transparent;
		&::before{
			background-color: #00fbfc;
		}
		tr{
			background-color: transparent;
		}
		&.el-table--enable-row-hover .el-table__body tr:hover > td{
			background-color: #0a3370 !important;
		}
		thead{
			position: relative;
			&::before{
				content: " ";
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 1px;
				background-color: #00fbfc;
				z-index: 10;
			}
			&::after{
				content: "";
				position: absolute;
				top: 48px;
				left: 0;
				width: 100%;
				height: 1px;
				background-color: #00fbfc;
				z-index: 10;
			}
			th{
				background-color: #001a52 !important;
				color: #FFF;
			}
		}
		th.is-leaf, td{
			color: #FFF;
			border-bottom: none;
		}
		.el-table__row{
			position: relative;
			background-color: transparent;
			td{
				border-bottom: solid 1px #00fbfc;
			}
		}
	}
}
</style>